<ion-header align-title="left" class="bar-positive">
    <ion-navbar>
        <ion-title>Drawing Board</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <div class="wrap">
        <div class="topbar">
            <div style=background-color:#7ecef4;
                class="the-color" 
                (click)="showPallet()">
                <!-- [style.background-color]="color"> -->
            </div>
            <div class="pen">
                <ul>   
                    <li>
                        <div class="circle s1 activePen"></div>
                    </li>
                    <li>    
                        <div class="circle s2"></div>  
                    </li>  
                    <li>
                        <div class="circle s3"></div>
                    </li>   
                    <li>
                        <div class="circle s4"></div>
                    </li>  
                    <li>
                        <div class="circle s5"></div>
                    </li>          
                </ul>       
            </div> 
        </div>
    </div> 
    <change-color [style.display]="isShowColorBoard" 
                (onclosePallet)=onclosePallet($event)>
    </change-color>
    <pallet [bgPicUrl]="bgPicUrl"></pallet>
</ion-content>